<template>
  <div id="app">
    <van-tabbar v-model="active" route v-show="$route.meta.hideTabbar!=true">
      <van-tabbar-item :to="{ name: 'home' }">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? tabbarIcons.home : tabbarIcons.homeActive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'category' }">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? tabbarIcons.fenlei : tabbarIcons.fenleiActive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'cart' }">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active ? tabbarIcons.gouwuche : tabbarIcons.gouwucheActive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item :to="{ name: 'mine' }">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? tabbarIcons.wode : tabbarIcons.wodeActive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <router-view />

  </div>
</template>
<script>

export default {
  data() {
    return {
      active: 0,
      tabbarIcons: {
        home: require('@/assets/img/tabbar/shouye2.png'),
        homeActive: require('@/assets/img/tabbar/shouye.png'),
        fenlei: require('@/assets/img/tabbar/fenlei2.png'),
        fenleiActive: require('@/assets/img/tabbar/fenlei.png'),
        gouwuche: require('@/assets/img/tabbar/gouwuche2.png'),
        gouwucheActive: require('@/assets/img/tabbar/gouwuche.png'),
        wode: require('@/assets/img/tabbar/wode2.png'),
        wodeActive: require('@/assets/img/tabbar/wode.png'),
      },
    
    };
  },
 
}
</script>

<style lang="less">

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
